<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="500"
    :close-on-click-modal="false">
    <el-form :inline="true" :model="formInline" class="">
      <el-form-item label="符号编码" prop="symbolCode">
        <el-input
          v-model="formInline.symbolCode"
          clearable
          placeholder="请输入"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="符号名称" prop="keyword">
        <el-input
          v-model="formInline.keyword"
          clearable
          placeholder="请输入"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch" size="small">搜索</el-button>
        <el-button type="primary" plain @click="handleReset" size="small" >重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" @selection-change="handleSelectionChange" row-key="id" ref="multipleTableRef"
      :default-checked-keys="defaultCheckedKeys">
      <el-table-column type="selection" width="55" />
      <el-table-column label="符号编码" prop="symbolCode"></el-table-column>
      <el-table-column label="符号名称" prop="symbolName"></el-table-column>
      <el-table-column label="符号" prop="symbolKey">
        <template slot-scope="scope">
          <span v-if="scope.row.symbolType == 'TEXT'">{{ scope.row.symbolKey }}</span>
          <img v-else-if="scope.row.symbolType == 'FORMULA_DATA'" :src="getImgJsonSrc(scope.row.symbolKey)"
            style="width: 50px;height: 20px;" />
          <img v-else-if="scope.row.symbolType == 'IMAGE'" :src="getImgSrc(scope.row.symbolKey)"
            style="width: 50px;height: 20px;" />
        </template>
      </el-table-column>
      <el-table-column label="单位" prop="symbolDescribe">
        <template slot-scope="scope">
          <span v-if="scope.row.symbolDescribeType == 'TEXT'">{{ scope.row.symbolDescribe }}</span>
          <img v-else-if="scope.row.symbolDescribeType == 'FORMULA_DATA'" :src="getImgJsonSrc(scope.row.symbolDescribe)"
            style="width: 50px;height: 20px;" />
          <img v-else-if="scope.row.symbolDescribeType == 'IMAGE'" :src="getImgSrc(scope.row.symbolDescribe)"
            style="width: 50px;height: 20px;" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="page" v-if="total > 0" :background="true" :current-page.sync="pageNum"
      :page-size.sync="pageSize" :layout="'total, sizes, prev, pager, next, jumper'" :page-sizes="[10, 30, 50, 100]"
      :total="total" @size-change="handleSizeChange" @current-change="handlepageNumChange" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { getAlgorithmSymbolList, editAlgo } from "@/api/computingConfig.js";
  export default {
    name: "SymbolChoose",
    props: {
      datas: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        title: "",
        dialogVisible: true,
        multipleSelection: [],
        defaultCheckedKeys: [],
        pageNum: 1,
        pageSize: 100,
        total: 0,
        tableData: [],
        formInline: {
          symbolKey: "",
          keyword: "",
          symbolType:''
        },
      };
    },
    mounted() {
      this.initData();
    },
    methods: {
      handleReset() {
        this.formInline = {
          keyword: "",
          symbolCode: "",
          symbolType:''
        };
        this.onSearch();
      },
      handleSearch() {
        this.pageNum = 1;
        this.onSearch();
      },
      getImgSrc(ossId) {
        return window.location.origin + '/prod-api/editor/file/download/' + ossId
        // return 'http://172.16.10.99/dev-api/editor/file/download/' +ossId
      },
      getImgJsonSrc(data) {
        const obj = JSON.parse(data);
        return obj.url;
      },
      initData() { this.onSearch(); },
      async onSearch() {
        try {
          this.loading = true;
          const res = await getAlgorithmSymbolList({...this.formInline,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          });
          console.log("符号查询结果")
          // 设置默认选中
          if (this.datas.algoSymbols?.length > 0) {
            this.defaultCheckedKeys = [...this.datas.algoSymbols];
            for (let i = 0; i < this.defaultCheckedKeys.length; i++) {
              this.defaultCheckedKeys[i] = Number(this.defaultCheckedKeys[i])
            }
          }
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.$nextTick(() => {
            this.tableData.forEach(item => {
              this.defaultCheckedKeys.forEach(el => {
                if (item.id === el) {
                  this.$refs.multipleTableRef.toggleRowSelection(item, true);
                }

              })
            });
          })

        } catch (error) {
          console.debug(error);
        } finally {
          this.loading = false;
        }
      },
      handleSizeChange(val) {
        if (this.pageSize * val > this.total) {
          this.pageNum = 1;
        }
        this.onSearch();
      },
      handlepageNumChange() {
        this.onSearch();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClose() {
        this.$emit("on-close");
      },
      async handleSure() {
        const params = { ...this.datas };
        params.algoSymbols = await this.multipleSelection.map(item => {
          return item.id.toString();
        });
        editAlgo(params).then((res) => {
          this.$emit("on-sure");
          this.$emit("on-close");
          this.$message.success("符号编辑成功！");
        });
      },
    },
  };
</script>

<style scoped>
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-delete {
    cursor: pointer;
  }

  .card-delete:hover {
    color: #f00;
  }

  .page {
    margin-top: 10px;
    display: flex;
    justify-content: right;
  }
</style>